<template>
  <view style="left: 20000px; top: 0; opacity: 0;" class="fixed">
    <canvas
      ref="canvasid"
      type="2d"
      :style="{ height: ch + 'px', width: wh + 'px' }"
      canvas-id="myCanvas"
    ></canvas>
  </view>
  <image :src="urlindex" class="img-canvas" mode="widthFix"></image>
  <!-- <image src="../../static/login/loginBg.png" mode="widthFix"></image> -->
</template>

<script setup>
import { nextTick, ref, defineProps, defineEmits } from "vue";
const emit = defineEmits(["childEvent"]);
const props = defineProps({
  bgimg: {
    type: Object,
    default(rawProps) {
      return {
        url:
          "https://lmt-app-cloud.yibaitao.com/20240416/4aaff851-8a4c-b8d2-ad6e-a0e08f828531.png",
        w: 710,
        h: 710,
        l: 20,
        t: 100,
      };
    },
  },
  codeimg: {
    type: Object,
    default(rawProps) {
      return {
        url:
          "https://lmt-app-cloud.yibaitao.com/20240416/4aaff851-8a4c-b8d2-ad6e-a0e08f828531.png",
        w: 186,
        h: 186,
        l: 544,
        t: 830,
      };
    },
  },
  logo: {
    type: Object,
    default(rawProps) {
      return {
        url:
          "https://lmt-app-cloud.yibaitao.com/20240604/86ed26a6-61e3-4ef3-60dd-95099af50a85.png",
        l: 20,
        t: 20,
        w: 216,
        h: 68,
      };
    },
  },
  titlename: {
    type: Object,
    default(rawProps) {
      return {
        name: "我是标题哦",
        l: 20,
        t: 894,
        size: 54,
        color: "black",
      };
    },
  },
  titlenametwo: {
    type: Object,
    default(rawProps) {
      return {
        name: "我是标题哦",
        l: 20,
        t: 894,
        size: 54,
        color: "black",
      };
    },
  },
  money: {
    type: Object,
    default(rawProps) {
      return {
        name: "10000",
        l: 60,
        t: 984,
        size: 54,
        color: "#B63434",
      };
    },
  },
  moneytwo: {
    type: Object,
    default(rawProps) {
      return {
        name: "礼品兑换券",
        l: 60,
        t: 984,
        size: 54,
        color: "#B63434",
      };
    },
  },

  logoname: {
    type: Object,
    default(rawProps) {
      return {
        name: "健康进万家 幸福满人间",
        l: 476,
        t: 60,
        size: 24,
        color: "#9E9E9E",
      };
    },
  },

  btneme: {
    type: Object,
    default(rawProps) {
      return {
        name: "适用于xx人群，主治xxx症状主治xxx症状主治xxx症状xxxxx",
        l: 20,
        t: 1104,
        size: 30,
        color: "#666666",
      };
    },
  },
  cw: {
    type: String,
    default(rawProps) {
      return "750";
    },
  },
  ch: {
    type: String,
    default(rawProps) {
      return "1200";
    },
  },
});

uni.showLoading({
  title: "加载中",
  mask: true,
});

const urlindex = ref(null);
const canvasid = ref(null);

const saveCanvasImg = () => {
  let imgUrl = props.bgimg.url; //网络资源背景图片
  let posterQrCodeImg = props.codeimg.url; //二维码
  let logo = props.logo.url;
  let logoname = props.logoname.name;
  let userName = props.titlename.name;
  let userNametwo = props.titlenametwo.name;
  let money = props.money.name;
  let moneytwo = props.moneytwo.name;
  let btneme = props.btneme.name;
  let ctx = uni.createCanvasContext("myCanvas", this);
  // ctx.setFillStyle('#ffffff');
  ctx.beginPath();
  // 根据原点和宽高绘制矩形轨迹
  ctx.rect(0, 0, props.cw, props.ch);
  // 设置填充颜色
  ctx.fillStyle = "#ffffff";
  // 开始填充
  ctx.fill();
  ctx.setStrokeStyle("#ffaa00");
  ctx.beginPath();
  if (userName) {
    // userName = userName;
    //字体大小
    ctx.setFontSize(props.titlename.size);
    //字体颜色
    ctx.setFillStyle(props.titlename.color);
    //画昵称
    ctx.fillText(userName, props.titlename.l, props.titlename.t);
  }
  if (userNametwo) {
    // userNametwo = userNametwo;
    //字体大小
    ctx.setFontSize(props.titlenametwo.size);
    //字体颜色
    ctx.setFillStyle(props.titlenametwo.color);
    //画昵称
    ctx.fillText(userNametwo, props.titlenametwo.l, props.titlenametwo.t);
  }
  if (money) {
    //字体大小
    ctx.setFontSize(props.money.size);
    //字体颜色
    ctx.setFillStyle(props.money.color);
    ctx.fillText(money, props.money.l, props.money.t);

    //字体颜色
    // ctx.setFillStyle('#B63434');
    // ctx.fillText("￥ ", 20, 1004);
  }
  if (moneytwo) {
    //字体大小
    ctx.setFontSize(props.moneytwo.size);
    //字体颜色
    ctx.setFillStyle(props.moneytwo.color);
    ctx.fillText(moneytwo, props.moneytwo.l, props.moneytwo.t);

    //字体颜色
    // ctx.setFillStyle('#B63434');
    // ctx.fillText("￥ ", 20, 1004);
  }
  if (logoname) {
    ctx.setFontSize(props.logoname.size);
    //字体颜色
    ctx.setFillStyle(props.logoname.color);
    ctx.fillText(logoname, props.logoname.l, props.logoname.t);
  }
  if (btneme) {
    ctx.setFontSize(props.btneme.size);
    //字体颜色
    ctx.setFillStyle(props.btneme.color);
    ctx.fillText(btneme, props.btneme.l, props.btneme.t);
  }
  // if (btneme) {
  // 	ctx.setFontSize(props.btneme.size);
  // 	//字体颜色
  // 	ctx.setFillStyle(props.btneme.color);
  // 	btneme = props.btneme.name.length > 40 ? props.btneme.name.substring(0, 42) + "..." : props.btneme.name;
  // 	ctx.lineWidth = 1;
  // 	var str = btneme
  // 	var lineWidth = 0;
  // 	var canvasWidth = 710; //计算canvas的宽度
  // 	var initHeight = 15; //绘制字体距离canvas顶部初始的高度
  // 	var lastSubStrIndex = 0; //每次开始截取的字符串的索引

  // 	for (let i = 0; i < str.length; i++) {
  // 		lineWidth += ctx.measureText(str[i]).width;
  // 		if (lineWidth > canvasWidth) {
  // 			ctx.fillText(str.substring(lastSubStrIndex, i), 0, props.btneme.t); //绘制截取部分
  // 			initHeight += 40; //20为字体的高度
  // 			lineWidth = 0;
  // 			lastSubStrIndex = i;
  // 		}
  // 		if (i == str.length - 1) { //绘制剩余部分  debugger

  // 			ctx.fillText(str.substring(lastSubStrIndex, i + 1), 0, props.btneme.t += props.btneme.size + 10);

  // 		}
  // 	}
  // 	// ctx.fillText(btneme, props.btneme.l, props.btneme.t,710);
  // }

  let asyncOperation1 = new Promise((resolve, reject) => {
    // 模拟异步操作，2秒后调用resolve
    // setTimeout(() => {

    // }, 2000);
    uni.getImageInfo({
      src: posterQrCodeImg,
      success(res) {
        ctx.drawImage(
          res.path,
          props.codeimg.l,
          props.codeimg.t,
          props.codeimg.w,
          props.codeimg.h
        );
        resolve(true);
      },
    });
  });

  let asyncOperation2 = new Promise((resolve, reject) => {
    // 模拟异步操作，3秒后调用resolve
    // setTimeout(() => {
    //   resolve('操作2完成');
    // }, 3000);
    uni.getImageInfo({
      src: logo,
      success(res) {
        ctx.drawImage(
          res.path,
          props.logo.l,
          props.logo.t,
          props.logo.w,
          props.logo.h
        );
        resolve(true);
      },
    });
  });

  let asyncOperation3 = new Promise((resolve, reject) => {
    // 模拟异步操作，3秒后调用resolve
    // setTimeout(() => {
    //   resolve('操作2完成');
    // }, 3000);
    uni.getImageInfo({
      src: imgUrl,
      success(res) {
        //先画背景图片
        ctx.drawImage(
          res.path,
          props.bgimg.l,
          props.bgimg.t,
          props.bgimg.w,
          props.bgimg.h
        );

        resolve(true);
      },
    });
  });

  // 使用Promise.all等待两个异步操作完成
  Promise.all([asyncOperation1, asyncOperation2, asyncOperation3])
    .then((values) => {
      // draw方法 把以上内容画到 canvas 中

      ctx.draw(true, (ret) => {
        // 保存canvas为图片
        uni.canvasToTempFilePath({
          canvasId: "myCanvas",
          quality: 1,
          success: function (res) {
            urlindex.value = res.tempFilePath;
            uni.hideLoading();
            emit("childEvent", urlindex.value);
          },
          fail: function (e) {
            emit("childEvent", "");
          },
        });
      });
    })
    .catch((error) => {
      console.error("有异步操作失败:", error);
    });
};

nextTick(() => {
  saveCanvasImg();
});
</script>
<style lang="scss" scoped>
image {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1000;
}

.fixed {
  position: absolute;
  top: 10000rpx;
}
</style>
